<template>
	<div class="header-body">
		<div class="header-body-left">
			<el-image class="logo" :src="logo"></el-image>
			<span class="app_name" @click="linkRoot">{{title}}</span>
			<div class="space_list">
				<label class="space_label" @click="$router.push('/space')">空间</label>
				<el-select class="space_selecter" v-model="space" @change="handlerSelectedChange" placeholder="请选择">
					<el-option v-for="item in spaceList" :value="String(item.id)" :label="item.name"></el-option>
				</el-select>
			</div>
			<el-button @click="handlerCreate">创建</el-button>
		</div>
		<div class="header-body-right">
			<el-link href="#/manage" v-if="userInfo.username === 'admin'">管理</el-link>
			<img :src="userInfo.avatar" v-if="userInfo.avatar" class="avatar"/>
			<div  class="avatar" v-else>{{userInfo.nickname ? userInfo.nickname.substr(0,1) : userInfo.username.substr(0,1)}}</div>
			<el-link href="#/user">{{userInfo.nickname}}</el-link>
			<el-link @click="logout">登出</el-link>
		</div>
	</div>
</template>

<script>
import Logo from '@/assets/logo.png'
import storage from 'store'
import {getInfo} from '@/api/user'
import { ElMessage } from 'element-plus'
export default {
	name: 'Header',
	props: {
		spaceList: {
			type: Array,
			default: () => []
		},
		handlerCreate: {
			type: Function,
			default: function(){}
		}
	},
	data() {
	  return {
		  logo: Logo,
		  title: import.meta.env.APP_TITLE,
		  space: '',
		  userInfo: {
			  avatar: '',
			  nickname: '',
			  username: ''
		  }
	  }
	},
	watch: {
		'spaceList': function(val){
			if(val.length > 0){
				this.space = String(val[0].id)
			}
		}
	},
	methods: {
		linkRoot: function(){
			this.$router.push('/')
		},
		logout: function(){
			storage.clearAll()
			this.$router.push('/login')
		},
		handlerSelectedChange: function(){
			console.log('uploadSelectedSpace', this.space)
			this.$emit('uploadSelectedSpace', this.space)
		},
		getUserInfo: function(){
			getInfo()
			.then(res => {
				if(res.code === 0){
					this.userInfo = res.data
				}else{
					ElMessage.error(res.msg)
				}
			})
		}
	},
	mounted() {
		this.getUserInfo()
	}
}
</script>

<style>
.header-body{
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.header-body-left{
	width: 40%;
	height: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.logo {
	width: 45px;
	height: 45px;
}
.app_name{
	color: aliceblue;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}
.space_list{
	margin-left: 20px;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 18px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.space_label{
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
}
.space_selecter{
	width: 150px;
	margin-left: 5px;
}
.header-body-right{
	display: flex;
	align-items: center;
}
.header-body-right *{
	margin-left: 10px;
	color: #FFFFFF;
	font-weight: bold;
}
.avatar{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #CCCCCC;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 27px;
}
</style>